<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="isLoading" class="box-card">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>{{ company.name }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">{{ company.manager }}</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addDepts(company)">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <template #default="{data}">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width:100%">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ data.manager }}</el-col>
                  <el-col :span="12">
                    <!-- 下拉菜单 element -->
                    <!-- 必须写$event,不然在获取数据的同时就不能判断了 data是每一项的数据 -->
                    <el-dropdown @command="handleClickDepts($event,data)">
                      <span>
                        操作<i class="el-icon-arrow-down" />
                      </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item command="edit">修改部门</el-dropdown-item>
                        <el-dropdown-item command="del">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <!-- 最好不在el-card里边用弹框 因为有样式可能会覆盖 -->
      <!-- 这里他骂了隔壁的必须得写成 XXX-XXX的形式 后边的值必须是他妈的驼峰命名  傻逼vue -->
      <app-dept
        ref="addDepts"
        :show-dialog.sync="showDialog"
        :node-list="nodeList"
        :node-code="nodeCode"
        @add-success="getdepartments"
      />
      <!-- @closebox="closeDept"  这个就不要了, 给需要子组件修改的那个值加sync-->
    </div>
  </div>
</template>

<script>
import { getdepartmentsAPI, deldepartmentsAPI } from '@/api/departments'
import appDept from './components/app-dept.vue'
import { getlist } from '@/utils'
export default {
  name: 'Departments',
  components: {
    appDept
  },
  data() {
    return {
      company: {
        id: '',
        name: '', // 公司名称
        manager: '负责人'
      },
      departs: [], // 这里保存列表数据
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      showDialog: false,
      nodeList: {},
      nodeCode: [],
      isLoading: false
    }
  },
  created() {
    // 可能在这里要调用很多借口  所以我们把调接口单独封装到 methods中, 然后在这里调方法
    this.getdepartments()
  },
  methods: {
    // 我们把调接口封装在methods中,然后在created调方法
    async getdepartments() {
      this.isLoading = true
      // 调用获取部门列表数据接口
      const { data } = await getdepartmentsAPI()
      // 修改公司名字
      this.company.name = data.companyName
      // 保存需要渲染的部门数据
      this.nodeCode = data.depts
      this.departs = getlist(data.depts, '')
      this.company.children = this.departs
      this.isLoading = false
      // console.log(data)
    },
    // 使用递归的方式实现
    // getlist(list, serchval) {
    //   const arr = []
    //   list.forEach(item => {
    //     if (item.pid === serchval) {
    //       item.children = this.getlist(list, item.id)
    //       arr.push(item)
    //     }
    //   })
    //   return arr
    // },
    // ====================
    // getlist(list) {
    //   const arr = list.filter(item => item.pid === '')
    //   arr.forEach(item => {
    //     item.children = list.filter(v => v.pid === item.id)
    //   })
    //   return arr
    // }

    handleClickDepts(cmd, data) {
      // console.log(cmd, data)
      if (cmd === 'add') {
        // 点击的添加按钮
        this.addDepts(data)
        // console.log('点击的添加按钮')
      }
      if (cmd === 'edit') {
        // console.log('点击的修改按钮')
        this.editDepts(data)
      }
      if (cmd === 'del') {
        this.delDepts(data.id)
        // console.log('点击的删除按钮')
      }
    },
    // 封装删除方法
    delDepts(id) {
      this.$confirm('你确定要tmd删除吗?', '温馨提示').then(async() => {
        // 在此处调删除接口
        await deldepartmentsAPI(id)
        // 提示
        this.$message.success('删除成功')
        // 重新获取数据
        this.getdepartments()
      }).catch(() => {

      })
    },
    // 封装添加弹出框方法
    addDepts(data) {
      this.showDialog = true
      // console.log(data)
      this.nodeList = data
      // 点击添加子部门的时候 获取部门负责人数据
      // this.$refs.addDepts.getUserSimple()
    },
    // 封装修改部门信息接口
    editDepts(data) {
      this.showDialog = true
      // console.log(data)
      this.nodeList = data
      // 这里因为Vue里DOM的更新是异步的 当我们掉接口时候 上边的showDialog=true 显示弹框的组件
      // 组件还没出来呢  我们就掉接口传参数  是获取不到的参数的 因为参数是弹框组件中的nodeList里边呢  所以加nextTick
      this.$nextTick(() => {
        this.$refs.addDepts.editUsersimple()
      })
    },
    // 封装关闭弹出框方法
    closeDept() {
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
